<template>
  <div style="text-align: center; background-color: #f1f1f3; height: 100%; padding: 0; margin: 0;">
    <h1 style="font-size: 50px;">{{ '欢迎你！' + user.name }}</h1>
    <!-- 个人中心描述组件 -->
    <el-descriptions title="个人中心" :column="2" border>
      <!-- 账号 -->
      <el-descriptions-item>
        <template #label>
          <el-icon><User /></el-icon> 账号
        </template>
        {{ user.no }}
      </el-descriptions-item>
      <!-- 电话 -->
      <el-descriptions-item>
        <template #label>
          <el-icon><Phone /></el-icon> 电话
        </template>
        {{ user.phone }}
      </el-descriptions-item>
      <!-- 性别 -->
      <el-descriptions-item>
        <template #label>
          <el-icon><Location /></el-icon> 性别
        </template>
        <el-tag
            :type="user.sex === 1 ? 'primary' : 'danger'"
            disable-transitions>
          <el-icon v-if="user.sex === 0"><Female /></el-icon>
          <el-icon v-else><Male /></el-icon>
          {{ user.sex === 1 ? '男' : '女' }}
        </el-tag>
      </el-descriptions-item>
      <!-- 角色 -->
      <el-descriptions-item>
        <template #label>
          <el-icon><Tickets /></el-icon> 角色
        </template>
        <el-tag
            type="success"
            disable-transitions>
          {{ user.roleId === 0 ? '管理员' :'用户' }}
        </el-tag>
      </el-descriptions-item>
      <!-- 新增展示其他字段，比如id、age等 -->
      <el-descriptions-item>
        <template #label>
          <el-icon><Document /></el-icon> ID
        </template>
        {{ user.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon><UserFilled /></el-icon> 年龄
        </template>
        {{ user.age }}
      </el-descriptions-item>
    </el-descriptions>

    <DateUtils></DateUtils>
  </div>
</template>

<script>
import DateUtils from "./DateUtils";
import {
  ElIcon,
  User,
  Phone,
  Location,
  Female,
  Male,
  Tickets,
  Document, // 新增图标，若需要可根据实际替换
  UserFilled
} from '@element-plus/icons-vue';

export default {
  name: "Home",
  components: {
    DateUtils,
    ElIcon,
    User,
    Phone,
    Location,
    Female,
    Male,
    Tickets,
    Document, // 注册新增图标
    UserFilled
  },
  data() {
    return {
      user: {}
    };
  },
  methods: {
    init() {
      const curUser = sessionStorage.getItem('CurUser');
      if (curUser) {
        this.user = JSON.parse(curUser);
      } else {
        console.error('sessionStorage 中未找到 CurUser 数据');
      }
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped>

</style>